<!-- QueryWindow.vue -->
<template>
  <div class="query-window">
    <div class="query-content">
      <h3>查询 {{ header }} 数据</h3>
      <input v-model="searchQuery" placeholder="输入搜索关键词" @input="performSearch" />
      <ul class="results-list">
        <li v-for="item in searchResults" :key="item" @click="selectItem(item)">
          {{ item }}
        </li>
      </ul>
      <button @click="$emit('close')">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QueryWindow',
  props: {
    header: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      searchQuery: '',
      searchResults: []
    }
  },
  methods: {
    performSearch() {
      // 这里应该实现实际的搜索逻辑
      // 目前只是一个模拟的示例
      this.searchResults = [
        this.searchQuery + ' 结果1',
        this.searchQuery + ' 结果2',
        this.searchQuery + ' 结果3'
      ];
    },
    selectItem(item) {
      this.$emit('select', item);
    }
  }
}
</script>

<style scoped>
.query-window {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.query-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
}

.results-list {
  list-style-type: none;
  padding: 0;
}

.results-list li {
  cursor: pointer;
  padding: 5px;
}

.results-list li:hover {
  background-color: #f0f0f0;
}
</style>
